<template>
	<view class="shiping">
		<view class="aaa">
			<video class="abc" :src="Video" loop autoplay></video>
			<view class="hezi">
				<view class="goBack" @click="goBack">
						<uni-icons  type="back" size="20" color="#fff"></uni-icons>
				</view>
				<view class="abcd" @click="getVideo">更换视频</view>
			</view>
		</view>			
	</view>
</template>

<script setup>
import { ref } from 'vue';
const Video = ref();
const getVideo =  async()=>{
	let res = await uni.request({
		url:"https://v2.xxapi.cn/api/meinv"
	});
	Video.value = res.data.data;
	console.log(res);
}

const goBack = ()=>{
	uni.navigateBack();
}

getVideo();
</script>

<style lang="scss" scoped>
.shiping{
	width: 100%;
	height: 1600rpx;
	.aaa{
		width: 100%;
		height: 1600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.abc{
			width: 100%;
			height: 1400rpx;
		}
		.hezi{
			display: flex;
			justify-content: center;
			align-items: center;
			.goBack{
				width:38px;
				height:38px;
				margin-top: 60rpx;
				margin-right: 60rpx ;
				background:rgba(40, 179, 137,0.5);
				left:30rpx;
				margin-left:0;
				border-radius: 100px;
				backdrop-filter:blur(10rpx);
				border:1rpx solid rgba(255,255,255,0.3);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.abcd{
				margin-top: 60rpx;
				width: 400rpx;
				height: 100rpx;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(40, 179, 137,0.5);
				font-size: 18px;
				transition: all 0.3s; /* 过渡动画，让效果更平滑 */
				&:hover {
				  transform: scale(1.05); /* 轻微放大 */
				  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 悬浮时添加阴影 */
				}
			}
		}	
	}	
}
</style>
